<script setup>
import { importEmo } from '@/utils/importEmo'

const emit = defineEmits(['sendEmo'])
const showEmo = ref(false)
const emoList = reactive([...importEmo(), {
    name: '困',
    img: '//static1.sieredu.com/common/images/sierEmoji/困@2x.png'
}, {
    name: '吃瓜',
    img: '//static1.sieredu.com/common/images/sierEmoji/吃瓜@2x.png'
}, {
    name: '哭哭',
    img: '//static1.sieredu.com/common/images/sierEmoji/哭哭@2x.png'
}])
function toggleEmo() {
    showEmo.value = !showEmo.value
}
function sendEmo(item) {
    emit('sendEmo', item)
}



</script>


<template>
    <div class="emojiBox" data-theme="light">
        <div class="emojiBtn" @click="toggleEmo"></div>
        <div class="emojiListContent" v-show="showEmo">
            <div class="scroll-content">
                <div class="emojiTit">全部表情</div>
                <div class="emojiList">
                    <div class="emojiItem" @click="sendEmo(item, index)" v-for="item, index in emoList" :key="index"><img
                            :src="item.img" alt="加油">
                        <div class="emojiItemName">{{ item.name }}</div>
                    </div>
                    <!-- <div class="emojiItem"><img
                                                                src="//static1.sieredu.com/common/images/sierEmoji/委屈@2x.png"
                                                                alt="委屈">
                                                            <div class="emojiItemName">委屈</div>
                                                        </div>
                                                        <div class="emojiItem"><img
                                                                src="//static1.sieredu.com/common/images/sierEmoji/睡觉@2x.png"
                                                                alt="睡觉">
                                                            <div class="emojiItemName">睡觉</div>
                                                        </div>
                                                        <div class="emojiItem"><img
                                                                src="//static1.sieredu.com/common/images/sierEmoji/哈喽@2x.png"
                                                                alt="哈喽">
                                                            <div class="emojiItemName">哈喽</div>
                                                        </div>
                                                        <div class="emojiItem"><img
                                                                src="//static1.sieredu.com/common/images/sierEmoji/爱你@2x.png"
                                                                alt="爱你">
                                                            <div class="emojiItemName">爱你</div>
                                                        </div>
                                                        <div class="emojiItem"><img
                                                                src="//static1.sieredu.com/common/images/sierEmoji/尴尬@2x.png"
                                                                alt="尴尬">
                                                            <div class="emojiItemName">尴尬</div>
                                                        </div>
                                                        <div class="emojiItem"><img
                                                                src="//static1.sieredu.com/common/images/sierEmoji/战斗@2x.png"
                                                                alt="战斗">
                                                            <div class="emojiItemName">战斗</div>
                                                        </div>
                                                        <div class="emojiItem"><img
                                                                src="//static1.sieredu.com/common/images/sierEmoji/闭嘴@2x.png"
                                                                alt="闭嘴">
                                                            <div class="emojiItemName">闭嘴</div>
                                                        </div>
                                                        <div class="emojiItem"><img
                                                                src="//static1.sieredu.com/common/images/sierEmoji/棒！@2x.png"
                                                                alt="棒！">
                                                            <div class="emojiItemName">棒！</div>
                                                        </div>
                                                        <div class="emojiItem"><img
                                                                src="//static1.sieredu.com/common/images/sierEmoji/伤心@2x.png"
                                                                alt="伤心">
                                                            <div class="emojiItemName">伤心</div>
                                                        </div>
                                                        <div class="emojiItem"><img
                                                                src="//static1.sieredu.com/common/images/sierEmoji/生病@2x.png"
                                                                alt="生病">
                                                            <div class="emojiItemName">生病</div>
                                                        </div>
                                                        <div class="emojiItem"><img
                                                                src="//static1.sieredu.com/common/images/sierEmoji/坏笑@2x.png"
                                                                alt="坏笑">
                                                            <div class="emojiItemName">坏笑</div>
                                                        </div>
                                                        <div class="emojiItem"><img
                                                                src="//static1.sieredu.com/common/images/sierEmoji/疑问@2x.png"
                                                                alt="疑问">
                                                            <div class="emojiItemName">疑问</div>
                                                        </div>
                                                        <div class="emojiItem"><img
                                                                src="//static1.sieredu.com/common/images/sierEmoji/锦鲤@2x.png"
                                                                alt="锦鲤">
                                                            <div class="emojiItemName">锦鲤</div>
                                                        </div>
                                                        <div class="emojiItem"><img
                                                                src="//static1.sieredu.com/common/images/sierEmoji/黑脸@2x.png"
                                                                alt="黑脸">
                                                            <div class="emojiItemName">黑脸</div>
                                                        </div>
                                                        <div class="emojiItem"><img
                                                                src="//static1.sieredu.com/common/images/sierEmoji/飞踹@2x.png"
                                                                alt="飞踹">
                                                            <div class="emojiItemName">飞踹</div>
                                                        </div>
                                                        <div class="emojiItem"><img
                                                                src="//static1.sieredu.com/common/images/sierEmoji/A@2x.png"
                                                                alt="A">
                                                            <div class="emojiItemName">A</div>
                                                        </div>
                                                        <div class="emojiItem"><img
                                                                src="//static1.sieredu.com/common/images/sierEmoji/B@2x.png"
                                                                alt="B">
                                                            <div class="emojiItemName">B</div>
                                                        </div>
                                                        <div class="emojiItem"><img
                                                                src="//static1.sieredu.com/common/images/sierEmoji/C@2x.png"
                                                                alt="C">
                                                            <div class="emojiItemName">C</div>
                                                        </div>
                                                        <div class="emojiItem"><img
                                                                src="//static1.sieredu.com/common/images/sierEmoji/D@2x.png"
                                                                alt="D">
                                                            <div class="emojiItemName">D</div>
                                                        </div>
                                                        <div class="emojiItem"><img
                                                                src="//static1.sieredu.com/common/images/sierEmoji/笑哭@2x.png"
                                                                alt="笑哭">
                                                            <div class="emojiItemName">笑哭</div>
                                                        </div>
                                                        <div class="emojiItem"><img
                                                                src="//static1.sieredu.com/common/images/sierEmoji/上课@2x.png"
                                                                alt="上课">
                                                            <div class="emojiItemName">上课</div>
                                                        </div>
                                                        <div class="emojiItem"><img
                                                                src="//static1.sieredu.com/common/images/sierEmoji/下课@2x.png"
                                                                alt="下课">
                                                            <div class="emojiItemName">下课</div>
                                                        </div>
                                                        <div class="emojiItem"><img
                                                                src="//static1.sieredu.com/common/images/sierEmoji/过@2x.png"
                                                                alt="过">
                                                            <div class="emojiItemName">过</div>
                                                        </div>
                                                        <div class="emojiItem"><img
                                                                src="//static1.sieredu.com/common/images/sierEmoji/YYDS@2x.png"
                                                                alt="YYDS">
                                                            <div class="emojiItemName">YYDS</div>
                                                        </div>
                                                        <div class="emojiItem"><img
                                                                src="//static1.sieredu.com/common/images/sierEmoji/端午@2x.png"
                                                                alt="端午">
                                                            <div class="emojiItemName">端午</div>
                                                        </div>
                                                        <div class="emojiItem"><img
                                                                src="//static1.sieredu.com/common/images/sierEmoji/土斯月饼@2x.png"
                                                                alt="土斯月饼">
                                                            <div class="emojiItemName">土斯月饼</div>
                                                        </div>
                                                        <div class="emojiItem"><img
                                                                src="//static1.sieredu.com/common/images/sierEmoji/中秋月亮@2x.png"
                                                                alt="中秋月亮">
                                                            <div class="emojiItemName">中秋月亮</div>
                                                        </div>
                                                        <div class="emojiItem"><img
                                                                src="//static1.sieredu.com/common/images/sierEmoji/花花@2x.png"
                                                                alt="花花">
                                                            <div class="emojiItemName">花花</div>
                                                        </div>
                                                        <div class="emojiItem"><img
                                                                src="//static1.sieredu.com/common/images/sierEmoji/自拍@2x.png"
                                                                alt="自拍">
                                                            <div class="emojiItemName">自拍</div>
                                                        </div> -->
                </div>
            </div>
            <div class="scrollbar"></div>
        </div>
    </div>
</template>

<style scoped>
.emojiBox .emojiBtn {
    width: 24px;
    height: 24px;
    background-image: var(--emjoy);
    background-size: 100%;
    transition: background 0.2s;
}

.emojiBox {
    margin-left: 10px;
    margin-bottom: 5px;
    position: relative;
}

.emojiBox .emojiBtn:hover {
    cursor: pointer;
    background-image: url() !important;
}


.emojiBox .emojiListContent {
    border-radius: 10px;
    border: 1px solid var(--gray_95);
    transition: all 0.3s ease 0.1s;
    position: absolute;
    background: var(--bg_white);
    height: 240px;
    box-sizing: border-box;
    bottom: -250px;
    left: 0;
    min-width: 350px;
    overflow: hidden;
    box-shadow: 0 -1px 10px rgba(69, 71, 77, 0.05);
    scrollbar-width: none;
    scrollbar-color: transparent var(--gray_90);
}

.emojiBox .emojiListContent .scroll-content {
    padding: 0 15px;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-top: 16px;
    box-sizing: border-box;
    scrollbar-width: none;
    scrollbar-color: transparent var(--gray_90);
}

.emojiBox .emojiListContent .emojiList {
    display: flex;
    flex-wrap: wrap;
}

.emojiBox .emojiListContent .emojiList .emojiItem {
    height: 36px;
    width: 36px;
    margin-bottom: 16px;
    margin-right: 20px;
    cursor: pointer;
    position: relative;
}

.emojiBox .emojiListContent .emojiList .emojiItem img {
    width: 100%;
    height: 100%;
}

.emojiBox .emojiListContent .emojiList .emojiItem .emojiItemName {
    position: absolute;
    top: -32px;
    padding: 4px 8px;
    border-radius: 4px !important;
    background: #000 !important;
    font-size: 12px !important;
    line-height: 20px !important;
    opacity: 0.8;
    pointer-events: none;
    left: 50%;
    transform: translateX(-50%);
    word-break: keep-all;
    color: var(--on_surface);
    display: none;
}</style>